<template>
	<div>
		<div class="">
			<van-form @submit="onSubmit">
				<van-field label="用户" v-model="regForm.uname" type="text" placeholder="请输入用户"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效用户名' }]" />
				<van-field label="密码" v-model="regForm.password" type="password" placeholder="请输入密码"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />
				<van-field label="确认" v-model="regForm.password2" type="password" placeholder="请确认密码"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />
				<van-field label="邮箱" v-model="regForm.email" type="email" placeholder="请输入邮箱"
					:rules="[{ pattern:regEmail, message: '无效邮箱' }]" />
				<van-field label="电话" v-model="regForm.phone" type="tel" placeholder="请输入电话"
					:rules="[{ pattern:regPhone, message: '无效手机号码' }]" />
				<!-- <van-field name="radio" label="性别">
					<template #input>
						<van-radio-group v-model="regForm.gender" direction="horizontal">
							<van-radio :name="1">男</van-radio>
							<van-radio :name="0">女</van-radio>
						</van-radio-group>
					</template>
				</van-field> -->
				<van-field label="昵称" v-model="regForm.nickName" type="text" placeholder="请输入昵称" />
				<!-- <van-field name="uploader" label="头像">
					<template #input>
						<van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead" />
					</template>
				</van-field> -->
				<div style="margin: 16px;">
					<van-button round block type="info" native-type="submit">提交</van-button>
				</div>
			</van-form>
			<div class="content-padded">
				<p>注册成功后的用户可用于登录</p>
			</div>
		</div>
	</div>
</template>
<script>
	import {registerAPI,uploadAvatarAPI} from "@/api/user.js";
	//import {register1API,} from "@/api/get.js";
	import {
		setUserLocal
	} from '@/utils/auth'
	export default {
		data() {
			return {
				regForm: { //表单中的字段名与数据库中用户表的字段名要求一致
					uname: "",
					password: "",
					// gender:1,
					email: "",
					phone: "",
					// avatar: "",
					nickName: ""
				},
				avatarList: [],
				//规则:字母数字‘6~12        
				regNamePwd: /^[a-z0-9]{3,12}$/i,
				regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
				regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
			};
		},
		methods: {
			//手动处理文件上传
			afterRead(file, detail) {
				file.status = 'uploading';
				file.message = '上传中...';
				uploadAvatarAPI(file, detail).then(result => {
					file.status = '';
					file.message = '';
					//重新生成显示的图片url
					this.avatarList = [];
					this.avatarList.push({
						url:  result.url     // this.APIDomainName +
					})
					//设置用户表中的字段值
					this.regForm.avatar = require("@/assets/images/logo.png");
				});
			},
			//处理提交保存
			onSubmit() {
				if (this.regForm.password != this.regForm.password2) {
					this.$toast("密码两次输入不一致");
					return;
				}
				//注意传递过去的参数user的属性名
				let user = this.regForm;
				delete user.password2; //删除该临时的字段
				registerAPI(user).then(result => {
					// setUserLocal(result.data.user);
					this.$router.push({
						name: "login"
					});
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	.content-padded {
		margin: 30px;
	}
</style>